<template>


	<view>

		<view class="header">
				<u-navbar title="我的标题" back-text="返回" @click-left="handleBack" @click-right="handleRight"></u-navbar>
		</view>

		<view class="grid-body">
			

			<uni-grid :column="3" :showBorder="true" @change="handleAdd">
				<uni-grid-item v-for="(type,index) in typeList" :key="type.id" class="vant1">
					<view class="grid-item-box">
						<image :src="`../../static/images/icons/${type.imgUrl}`" class="img1"></image>
						<text class="text">{{type.type}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>

	</view>

</template>

<script>
	import { listDevice, listDelDevice, listProductionDevice, postDataToAllProduction, postDataToADevice, delDevice, updateDevice  } from "@/api/system/device.js";
	import {
		addAppliance
	} from "@/api/system/appliance.js"
	import {
		listType
	} from "@/api/system/device.js"
	export default {
		data() {
			return {
				loading: true,
				showSearch: true,
				title: "",
				typeList: [],
				// 是否显示弹出层
				open: false,
				queryParams: {
					pageNum: 1,
					pageSize: this.$store.state.maxDeviceNumber,
					applianceName: null,
					roomId: null,
					type: null,
				},
				form: {},
				rules: {}
			};
		},
		created() {
			this.getList();

		},
		methods: {
			getList() {
				this.loading = true;
				listType(this.queryParams).then(response => {
					this.typeList = response.rows;
					// this.total = response.total;
					this.loading = false;
					console.log(this.typeList);
				});
			},
			cancel() {
				this.open = false;
				this.reset();
			},
			handleAdd() {
				this.reset();
				this.open = true;
				console.log(open);
				this.title = "添加设备管理";
			},
			reset() {
				this.form = {
					id: null,
					applianceName: null,
					roomId: null,
					type: null,
					remark: null
				};
				// this.resetForm("form");
			},
			submitForm() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.form.id != null) {
							updateAppliance(this.form).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								// this.getList();
							});
						} else {
							addAppliance(this.form).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								// this.getList();
							});
						}
					}
				});
			},
			handleBack() {
				// 处理左按钮点击事件  
				uni.navigateBack();
			},
		},
	}
</script>


<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14rpx;
		line-height: inherit;
	}

	/* #endif */

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15rpx 0;
	}


	.img1 {
		width: 15%;
		height: 15%;
	}
	.vant1 {
		display: flex;
	}
</style>